/**
 * KSAUI v1.0
 * Create：2014-01-23
 * Update：2024-08-22
 */
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: "阿里妈妈方圆体 VF Regular";
  src: url("./font/AlimamaFangYuanTiVF-Thin.woff2") format("woff2"), url("./font/AlimamaFangYuanTiVF-Thin.woff") format("woff");
  font-display: swap;
}

@ColorList: primary, success, warning, danger, blue, indigo, purple, pink, red, orange, yellow, green, teal, cyan, white, gray, light, black;
@ColorListValue: var(--primary),
var(--success),
var(--warning),
var(--danger),
var(--blue),
var(--indigo),
var(--purple),
var(--pink),
var(--red),
var(--orange),
var(--yellow),
var(--green),
var(--teal),
var(--cyan),
var(--white),
var(--gray),
var(--light),
var(--black);
@ColorListLength: length(@ColorList);

//字体图标名称
@iconfont: remixicon;

//表单高度
@inputHeight: 36px;

//============== 自定义标签初始化 ==============
ks-list-item,
ks-list,
ks-collapse,
ks-collapse-item,
ks-collapse-title,
ks-collapse-content,
ks-collapse-block,
ks-textarea,
ks-pic,
ks-pic-thumb,
ks-card, ks-card-title, ks-card-content,
ks-content {
  display: block;
}

//============== 全局样式整理 ==============
:root {
  --wght: 400;
  --BEVL: 80;

  /*== 全局 ==*/
  --background: #ffffff; /*页面背景*/
  --defcolor: #4a4a4a; /*通用主色*/
  --textcolor: #9e9e9e; /*浅色文字*/
  --highcolor: #3983f7; /*高亮主色 突出*/
  /*== 色系 ==*/
  --blue: #3983f7; /* 蓝色 blue*/
  --indigo: #727cf5; /* 靛青色 indigo*/
  --purple: #6b5eae; /* 紫色 purple*/
  --pink: #ff679b; /* 粉色 pink*/
  --red: #E12318; /* 红 red*/
  --orange: #ff9041; /* 橙色 orange*/
  --yellow: #f9bc0d; /* 黄色 yellow*/
  --green: #5abd48; /* 绿色 green*/
  --teal: #14d0ef; /* 天空蓝 teal*/
  --cyan: #00d4c0; /* 青色 cyan*/
  --white: #fff; /* 白色 white*/
  --gray: #9e9e9e; /* 灰色 gray*/
  --light: #bec3ca; /* 浅白 light*/
  --black: #474d56; /* 暗色 black*/
  --primary: #3983f7; /*主色*/
  --success: #5ab32d; /*成功*/
  --warning: #ea981d; /*警告*/
  --danger: #ff6a5b; /*错误*/

  /*== 边框 ==*/
  --bordercolor: #e4e8ec; /* 全局边框色 */
  /*== 背景 ==*/
  --background-light: #fff; /* 全局背景 浅色 */
  --background-gray: #f2f2f2; /* 全局背景 浅灰色 */
  --background-dark: #333333; /* 全局背景 深色 */
  /*== 文字 ==*/
  --link-color: #545454; /*超链接颜色*/
  --text-color: #4a4a4a; /*全局文字颜色*/
  --text-color-light: #3983f7; /*全局文字颜色 - 高亮*/
  --text-color-gray: #999; /*全局文字颜色 - 浅色*/
  --text-color-dark: #222; /*全局文字颜色 - 深色*/
  /*== 表单 ==*/
  --input-text: #555; /*表单输入框颜色*/
  --input-border: #dfdfdf; /*表单边框*/
  --input-border-hover: #a2cfff; /*表单边框 鼠标经过*/
  --input-background: #f9f9f9; /*表单背景*/
  --input_placeholder: #999; /*表单提示文字*/
  --input-disabled-background: #efefef; /*表单 被禁用 背景色*/
  --input-disabled-border: #dfdfdf; /*表单 被禁用 边框色*/
  /*== 按钮 ==*/
  --btn-color: rgba(0, 0, 0, .6); /*按钮 文字颜色*/
  --btn-background: rgba(255, 255, 255, 0.9); /*按钮 背景*/
  --btn-border: rgba(0, 0, 0, 0.1); /*按钮 边框*/

  --default-transition: all 0.2s ease-in-out; /*普通UI动画值*/
  /*== 卡片 ==*/
  --card-background : rgba(255,255,255, .9); /*卡片 背景*/
  --card-border-radius: 8px; /* 卡片 圆角值 */
  --card-box-shadow: rgba(0, 0, 0, 0.1) 0 0 8px; /* 卡片 阴影配置 */
  --card-box-filter: none; /* 卡片 背景模糊 */
  --card-border : #efefef 1px solid; /* 卡片 边框 */
  --card-box-title-bordercolor : #f2f2f2 1px solid; /* 卡片 标题 边框色 */
}

* {
  word-wrap: break-word;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

body, input, button, select, textarea, pre, code {
  font-family: "Microsoft YaHei", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: inherit;
  font-style: inherit;
  outline: none;
  color: inherit;
  font-variation-settings:'BEVL' var(--BEVL)
}

body {color: var(--text-color)}

a, .ks-link, .ks-link-line {
  text-decoration: none;
  color: var(--link-color);
}

a:active, a:hover {
  outline: none;
  text-decoration: none;
}

img {
  display: inline-block;
  vertical-align: middle;
  border: none
}

li {
  list-style: none
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

pre, code {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: auto;
  height: auto
}

textarea {
  overflow: auto;
  resize: vertical;
}

label {
  white-space: nowrap;
}

html {
  font-size: 100px;
}

body {
  font-size: 14px
}

//滚动条整体样式
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

//滚动条里面小方块
::-webkit-scrollbar-thumb {
  cursor: pointer;
  border-radius: 5px;
  background: rgba(0, 0, 0, .25);
  -webkit-transition: color .2s ease;
  transition: color .2s ease
}

//滚动条里面轨道
::-webkit-scrollbar-track {
  background: #ededed;
  border-radius: 10px;
}

//============== 清理浮动 ==============
ks-col:after,
ks-card:after,
ks-card-content:after,
.ks-step:after,
ks-col:after,
ks-layout:after,
ks-alert:after,
.ks-row:after,
.ks-ie9 ks-row[flex]:after,
.ks-ie10 ks-row[flex]:after,
ks-card-title:after,
ks-card-content:after,
ks-content {
  content: ' ';
  clear: both;
  display: block;
  width: 100%;
  height: 0;
  overflow: hidden
}

//============== 自定义新元素 ==============
// 货币
ks-price {
  font-size: 1em;
  display: inline-block;

  small {
    display: inline-block;
  }

  unit {
    font-size: .7em;
    display: inline-block;
  }
}

// 卡片
ks-card {
  display: block;
  background: var(--card-background);
  border-radius: var(--card-border-radius);
  border: var(--card-border);
  box-shadow: var(--card-box-shadow);
  backdrop-filter: var(--card-box-filter);

  ks-card-title {
    font-size: 1.071428em;
    font-weight: 500;
    border-bottom: var(--card-box-title-bordercolor);
  }
}

//============== 主框架 白色背景 ==============

.ks-box {
  background: #fff;
  padding: 15px;
}

.ks-box:not(:last-of-type) {
  margin-bottom: 15px;
}

.ks-box:after {
  content: '';
  width: 100%;
  height: 0;
  overflow: hidden;
  clear: both;
}

.ks-box-title {
  font-size: 16px;
  font-weight: bold;
  padding: 0 15px;
  margin: 0 -15px 15px;
}

//============== 当前位置 ==============
ks-navaction {
  display: block;
  margin-bottom: 15px;

  > *:not(ks-btn) {
    float: left;
    padding: 0 10px 0 0;
    margin-right: 10px;
    position: relative
  }

  > *:not(ks-btn):after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -3px;
    vertical-align: middle;
    width: 6px;
    height: 6px;
    border: var(--textcolor) 1px solid;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(45deg);
  }

  > :not(ks-btn):last-child {
    margin-right: 0
  }

  > :not(ks-btn):last-child:after {
    display: none
  }
}

//============== 浮动提示窗口层 ==============
.ks-body-layer-overflow {
  overflow: hidden
}

.ks-layer {
  position: fixed;
  background: #fff;
  box-shadow: rgba(0, 0, 0, .28) 0 0 10px;
  border-radius: 3px;
  top: 50%;
  left: 50%;
  overflow: hidden;
  opacity: 0;

  &[active] {
    opacity: 1;
  }

  &[active] + .ks-layer-cover {
    opacity: 1;
    //系统报警遮罩
    &._warning {
      opacity: 0;
      background: rgba(255, 137, 80, 0.6);
      animation: ks-anim-fadeout 0.77s linear infinite;
    }
  }

}


//layer title
.ks-layer-title {
  padding: 10px 24px;
  color: rgba(0, 0, 0, 0.8);
  font-weight: bold;
  font-size: 16px;
  border-bottom: var(--bordercolor) 1px solid;
  background: #fff
}

//layer关闭按钮
.ks-layer-close {
  height: 40px;
  line-height: 40px;
  width: 45px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  position: absolute;
  right: 0;
  top: 0;

  &:before {
    display: block;
  }

  &:hover {
    color: var(--highcolor);
  }
}

//layer body
.ks-layer-content {
  padding: 24px;
  overflow-y: auto;
}

//layer底部
.ks-layer-bottom {
  padding: 15px;
  text-align: right;
  border-top: var(--bordercolor) 1px solid;

  ks-btn {
    margin-right: 10px;
  }

  ks-btn:last-child {
    margin-right: 0;
  }
}


//layer遮罩层
.ks-layer-cover {
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  user-select: none;
}

//iframe框架
.ks-layer-iframe {
  overflow: hidden;
  background: #fff;

  .ks-layer-content iframe {
    border: none;
    width: 100%;
    height: 100%;
    overflow: hidden
  }

  .ks-layer-content {
    padding: 0;
    overflow: hidden;
    position: relative
  }

  .ks-layer-content .ks-loading {
    color: #fff;
    border-radius: 0.4em;
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -0.2rem 0 0 -0.65rem;
  }
}

//从右到左滑出一个全屏（移动端适用）
.ks-layer[pos="00"] {
  left: 100%;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 0
}

//自由定位的layer样式调整 一般用于下拉选择
.ks-layer[pos="0"] {
  border: var(--input-border) 1px solid;
  background: #fff;
  box-shadow: 0 5px 5px 0 rgba(154, 161, 171, .17);
  position: absolute;
  min-width: 120px;

  .ks-layer-content {
    padding: 0;
  }

  .ks-layer-title {
    background: #f2f2f2;
  }
}

//表单框
.ks-Dialog_form {
  .ks-layer-content {
    min-width: 400px;
    padding: 24px 40px;
  }
}

//toast 提示框
.ks-Dialog_toast {
  background: #fff;
  box-shadow: inset rgba(0, 0, 0, .2) 0 0 10px;
  text-align: center;
  cursor: pointer;
  margin-top: 20px;

  .ks-layer-close {
    display: none;
  }

  .ks-layer-content {
    color: #333;
    padding: 10px 20px 10px 15px;

    &:before {
      font-size: 26px;
      font-family: @iconfont;
      vertical-align: middle;
      margin-right: 4px;
    }
  }

  &[type='info'] {
    .ks-layer-content::before {
      content: '\EE59';
      color: var(--blue);
    }
  }

  &[type='success'] {
    .ks-layer-content::before {
      content: '\eb80';
      color: #00e747;
    }
  }

  &[type='error'] {
    .ks-layer-content::before {
      content: '\ee58';
      color: #ffb300;
    }
  }

  &[type='warning'] {
    .ks-layer-content::before {
      content: '\EA20';
      color: #f12905;
    }
  }

  &[type='loading'] {
    .ks-layer-content::before {
      content: '\eec4';
      font-family: @iconfont;
      font-size: 0.2rem;
      text-align: center;
      vertical-align: middle;
      display: inline-block;
      width: 0.2rem;
      height: 0.2rem;
      line-height: 0.2rem;
      animation: spin 1s linear infinite;
    }
  }
}


//确认框
.ks-Dialog_confirm {
  .ks-layer-title {
    padding: 0.2rem 0 0 0.25rem;
    font-size: 16px;
    border: 0
  }

  .ks-layer-title:before {
    font-family: @iconfont;
    content: '\ee59';
    color: var(--highcolor);
    font-size: 0.24rem;
    vertical-align: middle;
    margin-right: 0.05rem;
  }

  .ks-layer-content {
    font-size: 16px;
    padding: 0.1rem 0.4rem 0.4rem 0.55rem;
    min-width: 3.4rem
  }

  .ks-layer-bottom {
    border-top: 0;
    padding: 0 0.4rem 0.2rem;
  }
}

//系统提示 操作成功、失败、警告、提示
.ks-Dialog-systemMsg {
  background: rgba(255, 255, 255, .3);
  backdrop-filter: blur(15px);
  box-shadow: rgba(0, 0, 0, .6) 0 0 60px;
  border-radius: 8px;

  ._sys_title {
    font-size: 28px;
    font-weight: 400;
    color: #a9ff08;
  }

  ._sys_message {
    color: #fff;
    text-shadow: #000 0 0 1px;
    margin-top: 15px;
    font-size: 18px;
  }

  .ks-layer-content {
    padding: 25px 20px 20px 85px;
    width: auto;
    position: relative;
    min-width: 260px;
  }

  .ks-layer-bottom {
    border-top: 0;
    padding: 0 30px 30px;
  }

  .ks-layer-content::before {
    font-size: 50px;
    position: absolute;
    left: 20px;
    top: 15px
  }

  &.ks-Dialog_info {
    border-top: #00e5e7 5px solid;

    ._sys_title {
      color: #fff;
    }

    .ks-layer-content::before {
      font-family: @iconfont;
      content: '\EE59';
      color: #00e5e7;
    }
  }

  &.ks-Dialog_success {
    border-top: #00e747 5px solid;

    .ks-layer-content::before {
      font-family: @iconfont;
      content: '\eb80';
      color: #00e747;
    }
  }

  &.ks-Dialog_error {
    border-top: #ffe200 5px solid;

    ._sys_title {
      color: #ffd708;
    }

    .ks-layer-content::before {
      font-family: @iconfont;
      content: '\ee58';
      color: #ffe200;
    }
  }

  &.ks-Dialog_warning {
    border-top: #f53e1e 8px solid;
    background: rgba(255, 255, 255, .9);

    ._sys_title {
      color: #000;
    }

    ._sys_message {
      color: #f37200;
      text-shadow: none;
    }

    .ks-layer-content::before {
      font-family: @iconfont;
      content: '\EA20';
      color: #f53e1e;
    }
  }
}


.ks-Dialog_html .ks-layer-content {
  max-width: 680px;
}

//确认输入框
.ks-Dialog_prompt {
  .ks-layer-title {
    border: 0;
    padding-top: 20px;
    padding-bottom: 0
  }

  .ks-layer-content textarea {
    padding: 5px 0;
    overflow: hidden;
    border: 0;
    border-bottom: #f2f2f2 1px solid;
    height: 1.8em;
    line-height: 1.8em;
    border-radius: 0;
    resize: none;
  }

  .ks-layer-content textarea:focus {
    border-bottom-color: var(--blue)
  }

  .ks-layer-bottom {
    border: 0
  }
}

//新建页面层
.ks-layer.openWindow > .ks-layer-content {
  padding: 0;
  position: relative;
}

.ks-layer.openWindow > .ks-layer-title {
  padding: 0;
  height: 45px;
  line-height: 45px;
}

//弹出的下拉菜单
.ks-layer-showmenu[pos='0'] > .ks-layer-content {
  padding: 5px 0;

  > * {
    display: block;
    padding: 7px 15px;
    cursor: pointer;

    &:hover {
      background: #f8f8f8;
    }

    &:before {
      margin-right: 5px;
    }
  }
}

//下拉选择
.ks-layer-select {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;

  .ks-layer-content {
    max-height: 18em;
  }
}

.layer-loading {
  text-align: center;
  padding-top: 120px;
  color: var(--textcolor);

  [icon='loading'] {
    font-size: 40px;
    display: block;
  }
}

//浮动层
.ks-area-layer[pos='0'] {
  min-width: 220px;
  height: 320px;

  .ks-layer-content {
    position: relative;
    padding: 0
  }

  .ks-layer-content {
    overflow: hidden
  }

  .ks-area-layer-btn {
    border-bottom: #dfdfdf 1px solid;
    padding: 5px 10px;
    background: #f2f2f2;

    p {
      height: 30px;
      line-height: 30px;
      display: none;
      cursor: pointer
    }

    p:first-of-type {
      display: block
    }

    p.a {
      color: var(--highcolor)
    }

    p:hover {
      color: #e60000
    }

    p:before {
      content: '';
      width: 6px;
      height: 6px;
      display: inline-block;
      border-radius: 100%;
      background: var(--primary);
      vertical-align: middle;
      margin-right: 10px;
    }
  }

  .ks-area-layer-tit {
    color: var(--textcolor);
    text-align: center;
    border-bottom: #dedede 1px solid;
    padding-bottom: 10px
  }

  .ks-area-layer-c {
    overflow-y: auto;

    > ks-list > ks-list-item {
      padding-left: 10px;
      padding-right: 10px
    }
  }
}

//============== 图片查看器 ==============
.ks-viewer {
	user-select: none; background: rgba(0,0,0, .8); color: var(--text-color-gray);
	.ks-layer-title { background: none; border-color: rgba(255,255,255, .2); color: #fff;}
	.ks-layer-close {
      background: #333; color: #fff;
      &:hover { background: #af0000; color: #fff;}
    }
    .ks-layer-content {overflow: hidden; position: relative; padding: 10px;}
    .ks-viewer-loading {
      .ks-viewer-content {opacity: 0;}
    }
	.ks-viewer-content {
		width: 100%; height: 100%; flex: 1; overflow: hidden; position: relative; justify-content: center; align-items: center; display: flex;
		&> div {cursor: grab; transform:translate(0, 0) scale(1);}
		/*对比模式下*/
		&[comparison] .ks-viewer-comparison-img {opacity: 0;}
	}
  .ks-viewer-showmsg {
    position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 99; display: flex; align-items: center; justify-content: center; color: #fff; background: #000;
  }
}
.ks-viewer-img { position: relative; z-index: 2;}
/*对比元素*/
.ks-viewer-comparison-img {position: absolute; left: 0; top: 0; z-index: 1; opacity: 0}
.ks-viewer-comparison-dom {
	position: absolute; left: 0; top: 0; z-index: 3; width: 50%; height: 100%; overflow: hidden;
	img { position: absolute; left: 0; top: 0;}
}

.ks-viewer-comparison-btn {
	width: 3px; height: 100%; background:#fff; position: absolute; left: 50%; top: 0; z-index: 4; cursor: e-resize;
	&:after {
		content: ''; display: block; width: 20px; height: 20px; border-radius: 100px; overflow: hidden; background: #fff; top: 50%; left: -10px; position: absolute; cursor: e-resize
	}
}


//============== 浮动提示标 ==============
.ks-ftip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 500;
  background: #333;
  color: #fff;
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 3px;
}

.ks-ftip-x {
  width: 0;
  height: 0;
  border: #333 5px solid;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  position: absolute;
  bottom: -10px;
  left: 10px;
}

.ks-ftip[pos=bottom] .ks-ftip-x {
  top: -10px;
  bottom: auto;
  border-top-color: transparent;
  border-bottom-color: #333
}

//============== 提醒框 ==============
ks-alert {
  display: block;
  background: #f2f2f2;
  border: var(--bordercolor) 1px solid;
  color: var(--black);
  padding: 10px 15px;
  border-radius: 3px;
  position: relative;
  transition: all 0.1s ease-in-out;

  &[icon] {
    padding-left: 35px;
  }

  &[icon]:before {
    content: '\ee58';
    font-size: 20px;
    position: absolute;
    left: 10px;
    top: 9px;
    z-index: 1;
  }

  &[type="success"] {
    background: #f6ffed;
    border-color: #b7eb8f;
    color: var(--success);

    &[icon]:before {
      content: '\eb80';
    }
  }

  &[type="info"] {
    background: #ecf5ff;
    border-color: #b2d8ff;
    color: var(--highcolor);

    &[icon]:before {
      content: '\ee58';
    }
  }

  &[type="error"] {
    background: #fff2f0;
    border-color: #ffccc7;
    color: var(--danger);

    &[icon]:before {
      content: '\eb96';
    }
  }

  ks-alert-close {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 9;
    cursor: pointer;
    font-size: 12px;
  }

  ks-alert-title {
    display: block;
    width: 100%;
    margin-bottom: 5px;
    font-weight: 600;
  }
}

//============== TAB选项卡 ==============
ks-tab,
ks-tab-title,
ks-tab-content,
ks-tab-item,
ks-tab-touch-content {
  display: block;
  width: 100%;
  height: auto;
}

ks-tab-touch-content {
  overflow: hidden
}

ks-tab {
  display: block;

  ks-tab-content {
    transition: all 0.1s ease-in-out;
  }

  ks-tab-title {
    width: 100%;
    height: auto; overflow: hidden;
    position: relative;

    ks-tab-title-status {
      height: 4px;
      width: 40px;
      position: absolute;
      left: 30px;
      bottom: 0;
      background: var(--primary);
      border-radius: 4px;
      transition: all 0.3s;
      margin: 0 0 0 -20px;
      z-index: 10;
    }

    ks-tab-title-item {
      float: left;
      display: inline-block;

      padding: 0 10px 10px;
      min-width: 60px;
      user-select: none;
      text-align: center;
      margin-right: 10px;
      cursor: pointer;
      position: relative;
      &:after{
        content: '';
        position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; background:none;
      }
      &[active]:after{
        background: var(--primary);
      }
      &[active], &[active] a {
        color: var(--text-color-light)
      }

      &:last-of-type {
        margin-right: 0
      }
    }
  }

  &[touch] > ks-tab-touch-content > ks-tab-content > ks-tab-item {
    float: left;
    display: block;
    height: 100%;
    min-height: 10px;
  }
}

//============== 分页样式处理 ==============
ks-page {
  text-align: center;
  background: var(--background-light);
  font-size: 1em;
  padding-left: 1px;
  width: auto;
  height: 2.285em;
  margin: 0 auto;
  display: inline-block;

  > a {
    color: var(--text-color-gray);
  }

  *:before {
    vertical-align: unset
  }

  > * {
    float: left;
    color: var(--text-color-gray);
    height: 2.285em;
    line-height: 2.285em;
    padding: 0 .9em;
    border: var(--bordercolor) 1px solid;
    background: none;
    user-select: none;
    cursor: pointer;
    margin-left: -1px;
  }

  > *:first-child {
    border-radius: .22em 0 0 .22em;
  }

  > *:last-child {
    border-radius: 0 .22em .22em 0;
  }

  > *:hover {
    color: var(--text-color-light);
  }

  > *[active] {
    background: var(--primary);
    color: #fff !important;
    border-color: var(--primary);
    font-weight: bold;
  }

  > *[disabled] {
    cursor: not-allowed;
    color: #bbb;
    background: #fff
  }

  [icon='arrow_right']:before, [icon='last_page']:before {
    float: right;
    margin-right: 0;
  }

  //表单组
  ks-input-group {
    font-size: 1em;
    width: auto;
    padding: 0;
    color: var(--textcolor);
    height: 2.285em;
    border: 0;

    > * {
      height: 2.285em !important;
      line-height: 2.285em !important;
      font-size: 1em;
    }

    > input {
      width: 3.571em;
      padding: 0 .357em;
      text-align: center
    }

    ks-btn {
      background: var(--gray);
    }
  }

  ks-page-btn[disabled] {
    cursor: not-allowed;
    background: #f2f2f2
  }

  &[disabled] {
    opacity: .5;
    background: #f2f2f2;

    > * {
      cursor: not-allowed;
    }
  }

  &[size="small"] {
    font-size: 12px;
  }
}

//============== 列表样式 ==============

//普通列表
ks-list {
  width: 100%;
  height: auto;
  overflow: hidden;

  > * {
    display: block;
    padding: .71428em 0;
    position: relative;
    height: auto;
    overflow: hidden;
    list-style: none;
  }

  > *:after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    content: '';
    background-color: var(--bordercolor);
  }

  > *:not(.ks-fl):last-of-type:after {
    display: none;
  }

  > * > small {
    float: right;
    color: #898989;
  }
}

//折叠面板
ks-collapse {
  > * {
    > ks-collapse-title {
      height: auto;
      cursor: pointer;
      outline: none;
      width: 100%;
      overflow: hidden;
      &:before{
        font-size: 1em;
        line-height: 1.2em;
        transition: all 0.3s ease-in-out;
      }
      &:not([icon])::before {
        content: '\ea6d';
        font-family: @iconfont;
      }
      &[icon-right]:before{
        float: right;
      }
    }

    > ks-collapse-content {
      display: block;
      transition: all 0.1s ease-in-out;
      height: 0;
      overflow: hidden;
      opacity: 0;
    }


    &[active] > ks-collapse-title:before {
      transform: rotate(90deg);
    }

    &[active] > ks-collapse-content {
      opacity: 1
    }
  }
}


//圆点列表
.ks-list-dot {
  > ks-list-item {
    padding: 0;
    height: 30px;
    line-height: 30px;
  }

  > ks-list-item:before {
    content: '';
    vertical-align: middle;
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-top: -2px;
    border-radius: 100%;
    background: #ccc;
    margin-right: 5px
  }

  > ks-list-item:after {
    display: none
  }
}
/*公告类*/
ks-announcement { display:block; height: 30px; line-height: 30px; overflow: hidden; position: relative}
ks-announcement ul {margin-top: 0}

//数字列表
.ks-list-number {
  counter-reset: kslistnumber;

  > ks-list-item {
    padding: 0;
    height: 30px;
    line-height: 30px;
  }

  > ks-list-item:before {
    counter-incNaNpxent: kslistnumber;
    content: counters(kslistnumber, '');
    display: inline-block;
    line-height: 18px;
    padding: 0 5px;
    margin-right: 3px;
    border-radius: 2px;
    background: #bdbdbd;
    color: #fff;
    font-size: 12px;
  }

  > ks-list-item:nth-of-type(1):before,
  > ks-list-item:nth-of-type(2):before,
  > ks-list-item:nth-of-type(3):before {
    background: #fd4c08;
  }

  > ks-list-item:after {
    display: none
  }
}


//带右箭头
ks-list > ks-list-item[icon*='arrow_right'], .ks-list-arrow > ks-list-item {
  padding-right: 2em;
}

ks-list > ks-list-item[icon*='arrow_right']:before,
.ks-list-arrow > ks-list-item:before {
  color: #777;
  top: 50%;
  font-size: 1em;
  width: 1.2em;
  height: 1.2em;
  line-height: 1.2em;
  transform: translateY(-50%);
  text-align: center;
  font-family: @iconfont;
  position: absolute;
  right: 0;
}

.ks-list-arrow > ks-list-item:before {
  content: '\ea6e';
}

//左侧图标 设置类
.ks-list-icon {
  > ks-list-item {
    padding-left: 39px;
    line-height: 34px;
  }

  > ks-list-item > [icon]:first-of-type {
    width: 34px;
    height: 34px;
    text-align: center;
    line-height: 34px;
    border-radius: 100%;
    font-size: 24px;
    float: left;
    margin-left: -39px;
  }

  > ks-list-item::after {
    left: 39px;
  }
}

//单选列表
.ks-list-select {
  width: 100%;
  overflow-y: auto;

  > ks-list-item {
    cursor: pointer;
    white-space: nowrap;
    display: block
  }

  > ks-list-item:not(.ks-select-optgroup-title):hover {
    opacity: .7
  }

  > ks-list-item:before {
    font-size: 20px;
    width: 20px;
    height: 20px;
    text-align: center;
    font-family: @iconfont;
    color: #acacac;
    margin: 0 5px 0 0;
  }

  > ks-list-item[selected] {
    color: var(--highcolor);
  }

  > ks-list-item:not([icon])[selected]:before {
    content: '\eb7b';
  }

  > ks-list-item[selected]:before {
    float: right;
    color: var(--highcolor)
  }

  > ks-list-item[disabled] {
    color: #ddd;
    cursor: not-allowed;
    background: none
  }

  //被禁用的选项
  //分组名
  > ks-list-item.ks-select-optgroup-title {
    cursor: default;
    padding-right: 0 !important;
  }

  > ks-list-item.ks-select-optgroup-title:before {
    display: none
  }

  > ks-list-item.ks-select-optgroup-title > strong {
    display: block
  }

  //多选列表
  &[multiple] > ks-list-item:not([icon]):before {
    content: '\eb7f';
  }

  &[multiple] > ks-list-item:before {
    float: left;
  }

  &[multiple] > ks-list-item:not([icon])[selected]:before {
    content: '\eb85'
  }
}

//layer层处理
.ks-layer-select .ks-list-select > ks-list-item {
  padding-right: .57em;
  padding-left: .57em;
}

//混排基础元素
.ks-media {
  font-size: 14px;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.ks-media > * {
  margin-bottom: 12px;
  display: block;
}

//最后一个去掉下边距
.ks-media > *:last-child {
  margin-bottom: 0
}

.ks-media-img {
  width: 80px;
  height: auto;
  overflow: hidden;
  text-align: center;
}

.ks-media-img > img {
  max-width: 100%;
}

.ks-tc > .ks-media-img {
  display: inline-block;
}

//如果图片存在全圆角时，宽高必须相同
.ks-media-img.ks-o {
  height: 80px
}

//浮动图片样式
.ks-media-img:not(.ks-fl):not(.ks-fr) {
  width: 100%
}

.ks-media-img.ks-fl, .ks-media-img.ks-fr {
  margin-bottom: 0;
  flex: 0 0 auto
}

.ks-media-img.ks-fl {
  margin-right: 10px;
}

.ks-media-img.ks-fr {
  margin-left: 10px;
}


//图片右浮动时 内容区宽度的处理
.ks-media-img.ks-fl + *, .ks-media-img.ks-fr + * {
  overflow: hidden;
}

//标题
.ks-media-title {
  font-size: 1.148em;
  font-weight: 600
}

.ks-media-title, .ks-media-title a {
  color: var(--defcolor)
}

.ks-media-title * {
  font-weight: normal;
}

//标题子级去掉加粗
//内容摘要行 summary
.ks-media-text {
  color: var(--textcolor)
}


//============== 头像尺寸 ==============
ks-avatar {
  position: relative;
  text-align: center;
  display: inline-block;
  background: #ccc;
  color: #fff;
  width: 64px;
  height: 64px;
  line-height: 64px;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 100em;
  vertical-align: middle;
  word-break: break-all;
  font-size: 16px;

  &[isstr] {
    border: #f2f2f2 1px solid;
  }

  > img {
    width: 100%;
    height: auto;
  }

  > i[icon] {
    font-size: 28px;
  }

  &[size="small"] {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 13px;

    > i[icon] {
      font-size: 24px;
    }
  }

  &[size="mini"] {
    width: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;

    > i[icon] {
      font-size: 18px;
    }
  }

  &[square] {
    border-radius: 3px;
  }
}


//============== 轮播 ==============
.ks-slide {
  width: 100%;
  position: relative;
  height: auto;
  overflow: hidden;

  .ks-slide-c {
    width: 100%;
    transition: all 0.6s ease-in-out;
    height: auto;
    display: flex;
    flex-flow: row;
  }

  .ks-slide-c._a {

  }

  .ks-slide-item {
    width: auto;
    height: 100%; display: block;
    z-index: 1;
    transition: all .6s ease-in-out;
    flex-shrink: 0
  }

  //左右控制器
  .ks-slide-control-prev, .ks-slide-control-next {
    position: absolute;
    top: 50%;
    z-index: 99;
    cursor: pointer;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 100%;
    margin-top: -18px;
    background: #000;
    transition: all .3s ease-in-out;
    opacity: 0;
    display: inline-block;
    color: #fff;
  }

  .ks-slide-control-prev {
    left: 0;
  }

  .ks-slide-control-next {
    right: 0;
  }

  &:hover .ks-slide-control-prev {
    opacity: .3;
    left: 15px;
  }

  &:hover .ks-slide-control-next {
    opacity: .3;
    right: 15px;
  }

  .ks-slide-item._moveon {
    z-index: 10;
  }

  .ks-slide-item._hide {
    opacity: 0;
    z-index: 0
  }

  .ks-slide-item._up {
    z-index: 20
  }

  .ks-slide-item._on {
    z-index: 90
  }

  //状态显示
  .ks-slide-status {
    position: absolute;
    left: 0;
    bottom: 1em;
    text-align: center;
    width: 100%;
    z-index: 99
  }

  .ks-slide-status > * {
    width: 30px;
    padding: 2px 0;
    background: rgba(0, 0, 0, .2);
    color: #fff;
    font-size: 0.8571em;
    display: inline-block;
    cursor: pointer;
    margin: 0 2px;
  }

  .ks-slide-status > .a {
    background: rgba(255, 255, 255, .8);
    color: inherit;
  }
}

//============== ks框架 H5 ==============
ks, .ks {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  flex-direction: column;

  > ks-side, > .ks-side {
    width: 220px;
    flex: 0 0 auto
  }

  > ks-content, > .ks-content {
    flex: 1;
    flex-basis: auto;
    overflow: hidden;
    overflow-y: auto;
    width: 100%;
    height: 100%;

    ks-navbar-content, .ks-navbar-content {
      display: block;
      width: 100%;
      height: 100%;
      overflow: auto;

      &[active] {
        display: block;
      }
    }
  }

  > ks-footer, > ks-header,
  > .ks-footer, > .ks-header {
    flex: 0 0 auto;
  }

  &[navbar] {
    padding-bottom: 1.1rem;
    display: block;
    height: auto
  }
}

ks-navbar {
  height: 1.1rem;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: #fff;
  z-index: 900;

  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 1px;
    background: #ddd;
    transform: scale(.5) translateX(-50%);
  }

  > ks-navbar-item {
    padding-top: 0.3rem;
    text-align: center;
    flex: 1;
    position: relative;
    cursor: pointer;
    font-size: 0.24rem;
    //获得焦点
    &[active] {
      color: var(--highcolor);
    }

    //带图标的处理
    &[icon]:before {
      display: block;
      width: 100%;
      height: 0.54rem;
      line-height: 0.54rem;
      font-size: 0.46rem;
      text-align: center;
      margin: -0.2rem 0 0 0 !important;
    }

    //消息处理 默认圆点
    &[news]:after {
      content: '';
      background: var(--red);
      width: 0.12rem;
      height: 0.12rem;
      position: absolute;
      left: 50%;
      top: 1px;
      border-radius: 0.2rem;
      margin: 0.06rem 0 0 0.15rem;
      transform: scale(.8);
    }

    //消息处理 属性值第一位包含数字1-9
    &[news^="1"]:after, &[news^="2"]:after, &[news^="3"]:after, &[news^="4"]:after,
    &[news^="5"]:after, &[news^="6"]:after, &[news^="7"]:after, &[news^="8"]:after, &[news^="9"]:after {
      content: "" attr(news) "";
      width: auto;
      height: auto;
      padding: 0.02rem 0.06rem;
      font-size: 0.12rem;
      font-weight: bold;
      color: #fff;
      border: #fff 0.02rem solid;
      margin: 0 0 0 0.05rem;
    }
  }
}

//============== 日历 浮动层 ==============
.ks-calendar {
  font-size: 14px;
  width: 320px;
  padding: 0 15px 15px;

  * {
    transition: all 0.3s;
    user-select: none;
  }

  i, em {
    font-style: normal
  }

  .ks-calendar-t {
    width: 100%;
    text-align: center;
    position: relative;
    height: 50px;
    line-height: 50px;
    color: var(--input-text);
    font-size: 16px;

    > i {
      display: block;
      font-size: 20px;
      text-align: center;
      position: absolute;
      top: 0;
      cursor: pointer
    }

    > i:nth-child(1) {
      left: 15px
    }

    > i:nth-child(2) {
      left: 45px;
    }

    > i:nth-of-type(3) {
      right: 45px;
    }

    > i:nth-of-type(4) {
      right: 15px;
    }
  }

  .ks-calendar-ul {
    width: 100%;
    height: auto;
    overflow: hidden;

    em {
      font-weight: bold;
    }

    i, em {
      float: left;
      width: 14.28%;
      height: 36px;
      line-height: 36px;
      text-align: center;
    }

    i {
      cursor: pointer;
      border-radius: 3px;
    }

    i._ {
      color: rgba(255, 255, 255, .4)
    }

    i:hover {
      color: #333;
      background: rgba(255, 255, 255, .2);
    }

    i.a {
      color: #fff;
      background: var(--primary)
    }
  }


  .ks-calendar-b {
    width: 100%;
    padding: 15px 15px 0;
    height: auto;

    ks-btn {
      float: right;
      margin-top: 20px;
    }

    .ks-calendar-time {
      float: left;
    }
  }

  .ks-calendar-time {
    padding: 15px 0;

    > div {
      width: 40px;
      height: 40px;
      line-height: 40px;
      position: relative;
      float: left;
      border: none;
      text-align: center;
    }

    > div [data-digit] {
      border: none;
      position: absolute;
      left: 0;
      top: -20px;
      z-index: 1;
      width: 100%;
      height: 20px;
      line-height: 20px;
      cursor: pointer
    }

    > div [data-digit='down'] {
      bottom: -20px;
      top: inherit
    }
  }

  .ks-calendar-time {
    > div {
      font-size: 1.2em;
      font-weight: bold
    }

    div input {
      width: 40px;
      height: 40px;
      line-height: 40px;
      padding: 0;
      text-align: center;
      background: none;
      font-size: 1.2em;
      border: none;
    }

    [data-digit] {
      display: block;
      opacity: .3;
    }

    .ks-input-arrow:hover [data-digit] {
      opacity: 1
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      appearance: none;
      margin: 0;
    }
  }

}

//============== 星星评分显示组件 ==============
ks-star {
  color: #FFA101;

  &[value='0'] > *,
  > [active] ~ * {
    color: #ccc;
  }
}

//============== 暂无数据 ==============
ks-empty {
  display: block;
  padding: 30px 0;
  text-align: center;
  color: #cacaca
}

ks-empty:before {
  content: '\ecec';
  font-size: 3em;
  font-family: @iconfont;
  display: block;
}

//============== 表格框(table.js必须) ==============
.ks-table {
  width: 100%;
  background: var(--background-light);
  display: table;
  empty-cells: show;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
  line-height: 1.5715;
  position: relative;
  z-index: 1;

  th {
    font-weight: 400;
    color:#999;
  }

  th, td {
    padding: 14px;
    min-width: 51px;
    overflow-wrap: break-word;
    border-bottom: var(--bordercolor) 1px solid
  }
  &[size="small"]{
    th, td{
      padding: 8px;
    }
  }

  &[size="mini"]{
    th, td{
      padding: 4px;
    }
  }

  //模式 左标题右内容
  tr > th:only-of-type {
    width: 100px;
  }

  tr > th:only-of-type ~ td:only-of-type {
    width: auto;
  }

  //鼠标经过加背景色
  &[hover] tbody tr:hover {
    background: var(--background-gray);
  }

  //thead增加背景色
  &[data-style*='hover'] tr:hover {
    background: var(--background-gray);
    color: var(--text-color-dark);
  }

  //属性存在 striped = 隔行换色
  &[striped] tbody > tr:nth-of-type(even) {
    background: #fcfcfc
  }

  //line线条属性
  &[border] td, &[border] th {
    border: #f0f0f0 1px solid
  }

  //最后一行去掉底部边框
  &:not([border]) > *:last-child tr:last-child th, &:not([border]) > *:last-child tr:last-child td {
    border-bottom: 0
  }

  //行被选中
  tbody tr.ks-table-tr-checked {
    background: #e6f7ff !important;
  }

  tbody tr.ks-table-tr-checked td, tbody tr.ks-table-tr-checked {
    border-color: #d8e9f1
  }

  //table后跟随的分页
  & ~ page {
    margin-top: 20px
  }

  &[small] th,
  &[small] td {
    padding: 5px;
  }
}

.ks-table-toolbar {
  margin-bottom: 10px;
  width: 100%;
  height: auto;
  overflow: hidden
}

//自适应处理 table可能过长 或 屏幕过窄
.ks-table-auto {
  width: 100%;
  overflow-x: auto;
}

.ks-table-header > table,
.ks-table-body > table {
  table-layout: fixed;
}

.ks-table-body {
  margin-top: -1px;
}

.ks-table-header tr > th:last-of-type {
  border-right: 0
}

.ks-table-header .ks-td-scroll {
  padding: 0;
  border-left: 0;
}

//页头占位滚动条


//============== 表单结构 ==============

//处理表单布局
ks-form {
  display: block;

  ks-form-item {
    margin-bottom: 25px;
    display: flex;
    align-items: center; /* 垂直居中 */
    width: 100%;
  }

  > :last-child {
    margin-bottom: 0
  }

  ks-form-label {
    width: 125px;
    flex: 0 0 auto;
    text-align: right;
    padding-right: 12px;
  }

  ks-form-content {
    width: 100%;
    flex: auto;
  }

  ks-form-extra {
    min-height: 24px;
    line-height: 24px;
    font-size: 14px;
    color: rgba(0, 0, 0, .4);
    width: 100%;
    display: block;
  }


  ks-form-group {
    display: table;
    width: 100%;

    > * {
      display: table-cell;
      width: auto;
      padding: 0 10px;
    }

    > :first-child {
      padding-left: 0;
    }

    > :last-child {
      padding-right: 0;
    }
  }

  //搜索框模式
  &[search] {
    position: relative;
    padding-bottom: 36px;
    height: auto;
    overflow: hidden;
    display: block;

    ks-form-label {
      min-width: 100px;
      text-align: right
    }

    > * {
      float: left;
      width: 33.333333%;
      margin: 0 0 10px 0;
    }

    ks-form-btn {
      position: absolute;
      right: 0;
      bottom: 0;
      width: auto;
      margin: 0
    }

    ks-form-content > .ks-select {
      width: 100%
    }
  }

  &[size='small'] {
    font-size: 12px;

    ks-form-item {
      margin-bottom: 10px;
    }

    ks-form-label {
      height: 28px;
      line-height: 28px;
    }

    .ks-input input, .ks-input textarea, .ks-file,
    .ks-select,
    .ks-date,
    ks-area,
    ks-btn, .ks-range {
      height: (@inputHeight - 8px);
    }

    .ks-select {
      min-width: 60px;
    }

    ks-btn {
      line-height: (@inputHeight - 10px);
      padding: 0 10px;
    }

    .ks-switch {
      --height: 20px;

      > i:before {
        --size: 12px;
      }
    }
  }


  &[inline] {
    display: inline-block;

    > * {
      width: auto;
      margin-bottom: 0;
      display: inline-block;
      vertical-align: middle;
    }

    ks-form-label, ks-form-content, ks-form-extra {
      float: none;
      width: auto;
      text-align: left;
      display: inline-block;
      vertical-align: top;
    }
  }

  //垂直结构
  &[top] {
    ks-form-item { display: block;}
    ks-form-label, ks-form-content, ks-form-extra {
      display: block;
      width: 100%;
      text-align: left;
    }

    ks-form-label:after {
      content: '';
    }
  }
}

//普通行
.ks-row-arrow:after {
  content: '';
  display: block;
  width: 100%;
  clear: both;
  overflow: hidden;
}

//限制行 只有一行文字 固定高度 超出裁切 相对定位
.ks-row-x {
  width: 100%;
  height: 1.71428em;
  line-height: 1.71428em;
  position: relative;
  overflow: hidden;
}

//普通行 带右箭头
.ks-row-arrow {
  position: relative;
  padding-right: 1.4em;
}

.ks-row-arrow:before {
  font-family: @iconfont;
  content: '\ea6e';
  height: 1.2em;
  line-height: 1.2em;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -0.6em;
}

ks-row {
  display: block;

  &[flex] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }

  &[spacing='1'] {
    margin: -2.5px
  }

  &[spacing='2'] {
    margin: -5px
  }

  &[spacing='3'] {
    margin: -10px
  }

  &[spacing='4'] {
    margin: -15px
  }

  &[spacing='5'] {
    margin: -20px
  }

  &[spacing='6'] {
    margin: -25px
  }

  &[spacing='1'] > ks-col {
    padding: 2.5px
  }

  &[spacing='2'] > ks-col {
    padding: 5px
  }

  &[spacing='3'] > ks-col {
    padding: 10px
  }

  &[spacing='4'] > ks-col {
    padding: 15px
  }

  &[spacing='5'] > ks-col {
    padding: 20px
  }

  &[spacing='6'] > ks-col {
    padding: 25px
  }

  //内容垂直居中 -4px未考虑多场景下
  &[middle] > ks-col:before {
    height: 100%;
    display: inline-block;
    content: '';
    vertical-align: middle;
    margin-left: -5px;
  }
}

ks-col {
  flex: 1 0 auto;

  &[span] {
    flex: 0 0 auto
  }

  &[span='1'] {
    width: 8.33333%;
  }

  &[span='2'] {
    width: 16.66667%;
  }

  &[span='3'] {
    width: 25%;
  }

  &[span='4'] {
    width: 33.33333%;
  }

  &[span='5'] {
    width: 41.66667%;
  }

  &[span='6'] {
    width: 50%;
  }

  &[span='7'] {
    width: 58.33333%;
  }

  &[span='8'] {
    width: 66.66667%;
  }

  &[span='9'] {
    width: 75%;
  }

  &[span='10'] {
    width: 83.33333%;
  }

  &[span='11'] {
    width: 91.66667%;
  }

  &[span='12'] {
    width: 100%;
  }
}

.ks-ie9, .ks-ie10 {
  ks-row[flex] {
    display: block;
  }

  ks-col {
    float: left;
    display: block
  }
}

//栅格 平板
@media only screen and (min-width: 576px) {
  ks-col {
    &[sm='1'] {
      width: 8.33333%;
    }

    &[sm='2'] {
      width: 16.66667%;
    }

    &[sm='3'] {
      width: 25%;
    }

    &[sm='4'] {
      width: 33.33333%;
    }

    &[sm='5'] {
      width: 41.66667%;
    }

    &[sm='6'] {
      width: 50%;
    }

    &[sm='7'] {
      width: 58.33333%;
    }

    &[sm='8'] {
      width: 66.66667%;
    }

    &[sm='9'] {
      width: 75%;
    }

    &[sm='10'] {
      width: 83.33333%;
    }

    &[sm='11'] {
      width: 91.66667%;
    }

    &[sm='12'] {
      width: 100%;
    }
  }

}

//栅格 PC
@media only screen and (min-width: 992px) {
  ks-col {
    &[pc='1'] {
      width: 8.33333%;
    }

    &[pc='2'] {
      width: 16.66667%;
    }

    &[pc='3'] {
      width: 25%;
    }

    &[pc='4'] {
      width: 33.33333%;
    }

    &[pc='5'] {
      width: 41.66667%;
    }

    &[pc='6'] {
      width: 50%;
    }

    &[pc='7'] {
      width: 58.33333%;
    }

    &[pc='8'] {
      width: 66.66667%;
    }

    &[pc='9'] {
      width: 75%;
    }

    &[pc='10'] {
      width: 83.33333%;
    }

    &[pc='11'] {
      width: 91.66667%;
    }

    &[pc='12'] {
      width: 100%;
    }
  }

}

//栅格 高分屏
@media only screen and (min-width: 1900px) {
  ks-col {
    &[hd='1'] {
      width: 8.33333%;
    }

    &[hd='2'] {
      width: 16.66667%;
    }

    &[hd='3'] {
      width: 25%;
    }

    &[hd='4'] {
      width: 33.33333%;
    }

    &[hd='5'] {
      width: 41.66667%;
    }

    &[hd='6'] {
      width: 50%;
    }

    &[hd='7'] {
      width: 58.33333%;
    }

    &[hd='8'] {
      width: 66.66667%;
    }

    &[hd='9'] {
      width: 75%;
    }

    &[hd='10'] {
      width: 83.33333%;
    }

    &[hd='11'] {
      width: 91.66667%;
    }

    &[hd='12'] {
      width: 100%;
    }
  }

}

th.ks-label {
  width: 100px;
  padding: 10px;
}


//============== 表单 按钮 ==============
ks-btn {
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  user-select: none;
  height: @inputHeight;
  line-height: (@inputHeight - 2);
  position: relative;
  white-space: nowrap;
  z-index: 2;
  font-size: 14px;
  text-align: center;
  background: var(--btn-background);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.07);
  padding: 0 15px;
  letter-spacing: 1px;
  transition: .2s;
  border-radius: 4px;
  border: var(--btn-border) 1px solid;
  font-style: normal;
  overflow: hidden;


  &:after {
    /*
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-20deg);
    transform-origin: 85% 100%;
    background-image: linear-gradient(60deg, rgba(0, 0, 0, 17%) 10%, transparent 69%);
*/
  }

  &:hover {
    box-shadow: rgba(214, 255, 132, .8) 0 0 8px;
  }

  &:active {
    box-shadow: inset rgba(0, 0, 0, 0.6) 0 0 5px;
  }

  //被禁用
  &[disabled] {
    opacity: 0.8;
    pointer-events: none;
  }

  //整行
  &[block] {
    width: 100%;
  }

  //按钮图标统一增加右边距
  &[icon]:before:not(:only-child) {
    margin-right: 2px;
  }

  //按钮存在上传表单的处理 icon=upload
  &[icon='upload'] {
    position: relative;

    input[type='file'] {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      opacity: 0;
      height: 100%;
      width: 100%
    }
  }

  //颜色支持
  &:not([line]) {
    &[color] {
      color: #fff;

      &[disabled] {
        color: rgba(255, 255, 255, .6);
      }
    }

    //普通按钮 和白色按钮 文字颜色
    &:not([color]), &[color="white"] {
      color: var(--btn-color);

      &[disabled] {
        color: rgba(0, 0, 0, .6);
      }
    }

    .loop(@i) when (@i =< @ColorListLength) {
      @Cname: extract(@ColorList, @i);
      @Cval: extract(@ColorListValue, @i);
      &[color='@{Cname}'] {
        background: @Cval;
      }
      .loop(@i+1);
    }
    .loop(1);
  }

  &[line] {
    color: var(--btn-color);
    border-color: var(--btn-border);
    background: none;
    .loop(@i) when (@i =< @ColorListLength) {
      @Cname: extract(@ColorList, @i);
      @Cval: extract(@ColorListValue, @i);
      &[color='@{Cname}'] {
        color: @Cval;
        border-color: @Cval;
        background: none;
      }
      .loop(@i+1);
    }
    .loop(1);
  }

  /* 按钮尺寸控制 */

  &[size='small'] {
    height: (@inputHeight - 8px);
    line-height: (@inputHeight - 10px);
    font-size: 12px;
    padding: 0 6px;

    &[icon='loading']::before {
      width: 10px;
      height: 10px;
    }
  }

  &[size='mini'] {
    height: (@inputHeight - 16px);
    line-height: (@inputHeight - 18px);
    font-size: 12px;
    padding: 0 3px;

    &[icon='loading']::before {
      width: 8px;
      height: 8px;
    }
  }

}


//胶囊
ks-btn[cap], ks-btn-group[cap] > ks-btn {
  border-radius: 100em;
}

//胶囊 纯图标
ks-btn[cap]:empty, ks-btn-group[cap] > ks-btn:empty {
  padding: 0;
  text-align: center;
}


//按钮组处理
ks-btn-group {
  display: inline-block;
  vertical-align: middle;

  &:after {
    content: '';
    display: block;
    clear: both;
    width: 100%;
    overflow: hidden
  }

  > ks-btn {
    float: left
  }

  > ks-btn:not(:first-child) {
    margin-left: -1px
  }

  //不是最后一个和第一个
  > ks-btn:not(:last-child):not(:first-child) {
    border-radius: 0 !important;
  }

  //第一个
  > ks-btn:first-child:not(:only-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  //最后一个
  > ks-btn:last-child:not(:only-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }


  //颜色支持
  &:not([line]) {
    &[color] > ks-btn {
      color: #fff;
      border: 0;
    }

    .loop(@i) when (@i =< @ColorListLength) {
      @Cname: extract(@ColorList, @i);
      @Cval: extract(@ColorListValue, @i);
      &[color='@{Cname}'] > ks-btn {
        background: @Cval;
        border-color: @Cval
      }
      .loop(@i+1);
    }
    .loop(1);
  }

  &[line] {
    .loop(@i) when (@i =< @ColorListLength) {
      @Cname: extract(@ColorList, @i);
      @Cval: extract(@ColorListValue, @i);
      &[color='@{Cname}'] > ks-btn {
        color: @Cval;
        border-color: @Cval;
        background: none;
      }
      .loop(@i+1);
    }
    .loop(1);
  }
}

//============== ks-tag标记 ==============
ks-tag {
  display: inline-block;
  white-space: nowrap;
  padding: 2px 5px;
  font-size: 14px;
  border-radius: 3px;
  vertical-align: middle;
  background: #e6effb;
  color: var(--defcolor);
  position: relative;

  &[close] {
    padding-right: 18px;
  }

  &[cap] {
    border-radius: 1em;
  }

  //圆角
  &:not([line]) {
    .loop(@i) when (@i =< @ColorListLength) {
      @Cname: extract(@ColorList, @i);
      @Cval: extract(@ColorListValue, @i);
      &[color='@{Cname}'] {
        background: @Cval;
        color: #fff;
      }
      .loop(@i+1);
    }
    .loop(1);

    &[color='white'] {
      color: var(--textcolor);
      border: #f2f2f2 1px solid
    }
  }

  &[line] {
    border: var(--bordercolor) 1px solid;
    color: inherit;
    background: none;
    .loop(@i) when (@i =< @ColorListLength) {
      @Cname: extract(@ColorList, @i);
      @Cval: extract(@ColorListValue, @i);
      &[color='@{Cname}'] {
        color: @Cval;
        border-color: @Cval;
        background: none;
      }
      .loop(@i+1);
    }
    .loop(1);
  }

  > i[icon="close"] {
    font-size: 14px;
    display: inline-block;
    width: 12px;
    height: 12px;
    text-align: center;
    line-height: 10px;
    cursor: pointer;
    opacity: .7;
    position: absolute;
    right: 5px;
    top: 50%;
    margin-top: -6px;

    &:before {
      float: left;
    }

    &:hover {
      opacity: 1
    }
  }


  &[edit] {
    cursor: pointer
  }

  > input[type="text"] {
    position: absolute;
    left: 0;
    top: 0;
    border: none;
    background: none;
    width: 100%;
    height: 100%;
    padding: 0 .4em;
  }
}


//============== 输入框、日期框、select ==============

//去掉number默认箭头
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

//日期输入框 单行内 输入框 底色 宽度 边框 圆角 内边距
.ks-date {
  display: inline-block;
  height: @inputHeight;
  line-height: (@inputHeight - 2);
  align-items: center;
  padding: 0 40px 0 10px;
  width: 190px;
  overflow: hidden;
  position: relative;

  &:after {
    content: '\e64a';
    color: #aaa;
    position: absolute;
    right: 0;
    width: 40px;
    text-align: center;
    top: 0;
  }

  input {
    border: none;
    border-radius: 0;
    background: none;
    width: 100%;
    height: @inputHeight;
    padding: 0;
    display: block
  }
}

.ks-range{
  height: @inputHeight; line-height: (@inputHeight + 4);
  display: inline-block;
  padding: 0 10px;
  accent-color: var(--blue);
  input[type="range"] { width: 100%;}
}
.ks-range[size=small] {padding: 0 5px;}
.ks-range[size=mini] {padding: 0 3px;}

//下拉选择框
.ks-select {
  display: inline-block;
  user-select: none;
  height: @inputHeight;
  overflow: hidden;
  border: var(--input-border) 1px solid;
  border-radius: 3px;
  background: var(--input-background);
  cursor: pointer;
  min-width: 78px;

  select {
    display: none
  }

  &[disabled] {
    cursor: not-allowed;
    opacity: .7;
  }

  //未禁用状态
  &:not([disabled]):hover {
    border-color: var(--input-border-hover);
  }

  .ks-select-title {
    display: inline-flex;
    align-items: center;
    position: relative;
    padding: 0 25px 0 10px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: var(--input-text);

    &:before {
      font-family: @iconfont;
      content: '\ea4e';
      transition: var(--default-transition);
      font-size: 14px;
      position: absolute;
      right: 0;
      width: 20px;
      text-align: center;
    }
    > span {
      white-space: nowrap;
    }
    //第一个span后面的span 添加分割斜杠
    > span:first-child ~ span:before {
      content: '/';
      margin: 0 3px;
      color: var(--textcolor);
    }
  }


  select:disabled ~ .ks-list-select {
    cursor: not-allowed;
    opacity: .7
  }

  .ks-select-title[active]:before {
    transform: rotate(180deg);
    color: var(--input-text);
  }
}

//普通输入框
.ks-input {
  display: inline-block;
  position: relative;
  width: 100%;

  input, textarea {
    display: inline-block;
    width: 100%;
    padding: 0 10px;
    height: @inputHeight;
    border: var(--input-border) 1px solid;
    border-radius: 3px;
    background: var(--input-background);
    color: var(--input-text);
    outline: none;
    -webkit-appearance: none;
    box-shadow: none;
    box-sizing: border-box;

    &:not(:disabled):hover {
      border-color: var(--input-border-hover);
    }
  }

  textarea {
    padding-top: 5px;
    padding-bottom: 5px;
    min-height: (@inputHeight * 3);
    /*输入字数统计*/

    ~ span {
      right: 10px;
      bottom: 3px;
      font-size: 12px;

      i {
        font-style: normal;
      }
    }
  }

  //清除text文本输入框的清除图标
  > input::-ms-clear {
    display: none;
  }

  //清除password密码输入框的明文图标
  > input::-ms-reveal {
    display: none;
  }

  input:disabled,
  textarea:disabled {
    cursor: not-allowed;
    background-color: var(--input-disabled-background);
    border-color: var(--input-disabled-border);
    opacity: .75;
  }

  /* placeholder 颜色*/

  input::placeholder,
  textarea::placeholder {
    color: var(--input_placeholder);
  }


  > left[icon], > right[icon] {
    width: 32px;
    height: 100%;
    text-align: center;
    position: absolute;
    top: 1px;
    z-index: 10;
    color: var(--input-text);
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
  }

  > left[icon] {
    left: 1px;

    ~ input {
      padding-left: 32px;
    }
  }

  > right[icon] {
    right: 1px;

    ~ input {
      padding-right: 32px;
    }
  }


  //输入框内容清理图标
  > right.ks-input-clear {
    display: none;
    cursor: pointer;
    font-size: 14px;
    width: 14px;
    height: 14px;
    text-align: center;
    line-height: 14px;
    margin-top: -7px;
    top: 50%;
    right: 5px;

    &:before {
      display: inline-block;
    }

    &[active] {
      display: block
    }
  }
}

/* 表单 - 递增输入框 */
.ks-input-arrow {
  position: relative;
  display: inline-block;

  &:after {
    content: '';
    width: 100%;
    height: 0;
    overflow: hidden;
    display: block
  }

  > [data-digit] {
    position: absolute;
    right: 1px;
    width: 22px;
    height: 50%;
    line-height: 1.5;
    top: 1px;
    text-align: center;
    border-left: var(--input-border) 1px solid;
    cursor: pointer;
    display: none;
    z-index: 10;
    user-select: none;
    font-size: 12px
  }

  > [data-digit]:hover {
    color: var(--highcolor)
  }

  > [data-digit='down'] {
    bottom: 1px;
    top: auto;
    border-top: var(--input-border) 1px solid;
  }

  > input {
    padding: 0 22px 0 10px;
    float: left;
    width: 100%
  }

  &:hover [data-digit], > input:focus ~ [data-digit] {
    display: block
  }
}

/* 表单 - 密码输入框 */
.ks-password [icon=ishide].a {
  content: '\e66a'
}

/* 表单 - 下拉联想输入框 */
.ks-input-smart {
  p {
    padding: 0 5px;
    font-size: 13px;
    height: 36px;
    line-height: 36px;
    overflow: hidden;
    max-width: 380px;
    border-bottom: #dedede 1px solid;
    cursor: pointer;

    &:hover {
      color: var(--blue);
      background: #f2f2f2
    }

    &:last-child {
      border-bottom: 0
    }
  }
}

/* 表单 - radio 单选按钮 */
.ks-radio {
  height: 20px;
  line-height: 20px;
  display: inline-block;
  vertical-align: middle;

  * {
    font-style: normal;
  }

  > i {
    cursor: pointer;

    > em {
      margin: 0 10px 0 3px;
    }

    &:before {
      transition: var(--default-transition);
      content: '';
      width: 16px;
      height: 16px;
      border-width: 1px;
      border-style: solid;
      border-color: var(--input-border);
      background: var(--input-background);
      display: inline-block;
      border-radius: 50%;
      box-sizing: border-box;
      vertical-align: -2px;
    }
  }

  &:last-of-type > i > em {
    margin-right: 0
  }

  > input {
    display: none;

    &:checked ~ i {
      color: var(--highcolor);

      &:before {
        border: var(--highcolor) 5px solid;
      }
    }

    &:disabled ~ i {
      cursor: not-allowed;
      opacity: .5;
    }
  }
}

/* 表单 - checkbox 多选 */
.ks-checkbox {
  height: 20px;
  line-height: 20px;
  display: inline-block;
  vertical-align: middle;
  user-select: none;
  * {
    font-style: normal;
  }

  > i {
    display: inline-block;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    > em {
      margin: 0 10px 0 3px;
    }
  }

  &:last-of-type > i > em {
    margin-right: 0
  }

  > i:before {
    transition: var(--default-transition);
    color: var(--input-border);
    text-align: center;
    font-family: @iconfont;
    vertical-align: 0;
    font-size: 12px;
    width: 16px;
    height: 16px;
    line-height: 14px;
    border-radius: 2px;
    content: '\eb7b';
    display: inline-block;
    border-width: 1px;
    border-style: solid;
    border-color: var(--input-border);
    box-sizing: border-box;
    background: var(--input-background)
  }

  > input {
    display: none;

    &:checked ~ i:before {
      background: var(--highcolor);
      color: #fff;
      border-color: var(--highcolor);
    }

    &:disabled , &[readonly] {
      pointer-events: none;
      ~ i {
        cursor: not-allowed;
        opacity: .5;
      }
    }
  }

  /* 全选按钮 部分选中状态 */

  &[indeter] > i:before {
    content: '\f1af';
    color: var(--highcolor)
  }
}

/* 表单 - 开关样式 */
.ks-switch {
  display: inline-block;
  vertical-align: middle;
  user-select: none;

  * {
    font-style: normal;
  }

  > i {
    --height: 24px;
    transition: var(--default-transition);
    position: relative;
    padding: 0;
    padding-left: calc(var(--height) + 2px);
    padding-right: 15px;
    border-radius: 100px;
    height: var(--height);
    line-height: var(--height);
    background: rgba(0, 0, 0, .1);
    color: var(--text-color-gray);
    display: inline-block;
    cursor: pointer;

    &:before {
      --size: 18px;
      transition: var(--default-transition);
      content: '';
      display: inline-block;
      width: var(--size);
      height: var(--size);
      background: #fff;

      border-radius: 20px;
      position: absolute;
      top: 50%;
      margin-top: calc(var(--size) / -2);
      left: 3px;
      box-shadow: rgba(0,0,0, .3) 0 0 5px;
    }

    em:nth-of-type(2) {
      display: none
    }

    /* 2组文本 开 隐藏第一个 排除唯一 */
    /* 无文字开关 */

    &:empty {
      height: 16px;
      line-height: 16px;
      display: inline-block;

      &:before {
      }
    }
  }

  > input {
    display: none;

    &:active ~ i:before {
      width: 26px;
    }

    &:disabled ~ i {
      cursor: not-allowed;
      opacity: .5;
    }

    &:checked {
      ~ i {
        background: var(--highcolor);
        padding-right: calc(var(--height) + 2px);
        padding-left: 15px;
        color: #fff;

        &:before {
          left: 100%;
          margin-left: calc(var(--size) * -1 - 4px);
          background: #fff;
        }

        &:empty:before {
          margin-left: -18px
        }

        //2组文本 开 显示第二个
        em:nth-of-type(1):not(:only-of-type) {
          display: none
        }
      }

      &:active ~ i:before {
        margin-left: -30px;
      }

      ~ i em:nth-of-type(2) {
        display: inline-block
      }

      &:active ~ i:empty:before {
        margin-left: -26px;
      }
    }
  }


  .loop(@i) when (@i =< @ColorListLength) {
    @Cname: extract(@ColorList, @i);
    @Cval: extract(@ColorListValue, @i);
    &[color='@{Cname}'] > input[type=checkbox]:checked ~ i {
      background: @Cval;
    }
    .loop(@i+1);
  }
  .loop(1);
}

/* 表单 - 文件上传框 */
.ks-file {
  display: inline-flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  border: var(--input-border) 1px solid;
  border-radius: 3px;
  background: var(--input-background);
  color: var(--input-text);
  height: @inputHeight;

  &:hover {
    border-color: var(--input-border-hover);
  }

  input[type=file] ~ span {
    display: inline-block;
    width: auto;
    cursor: pointer;
    padding: 0 5px;
    position: relative;

    &:before {
      float: left;
      margin: 0 3px 0 0;
    }
  }

  &[uploading] {
    &:after {
      content: '上传中 ' attr(progress) '%';
      color: rgba(255, 255, 255, .2);
      font-size: 12px;
      overflow: hidden;
      box-sizing: border-box;
      width: var(--progress);
      height: 100%;
      color: #fff;
      text-align: center;
      border-bottom: rgba(91, 248, 0, 0.8) 3px solid;
      background: rgba(0, 0, 0, .8);
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      z-index: 3;
    }
  }
}


/* 表单 - 颜色选择器 */

.ks-input-color {
  position: relative;
  > span { width: 26px; height:calc(100% - 9px); display: block; position: absolute; left: 3px; top: 5px; z-index: 10; cursor: pointer; background: #000; color: #fff;}
  input {padding-left: 35px;}
}

.ks-layer-color {
  background: #fff;
  &[pos="0"] {background: #fff;}

  .ks-layer-color-content {
    width: 320px;

    .ks-layer-color-pancel {
      width: 100%;
      padding-bottom: 55%;
      position: relative;
      border-radius: 2px 2px 0px 0px;
      overflow: hidden;
    }

    .ks-layer-color-pancel ._pancel {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0px;
    }

    .ks-layer-color-tools {
      padding: 0 16px 20px;
    }

    ._saturation-white {
      background: -webkit-linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
      background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

    ._saturation-black {
      background: -webkit-linear-gradient(to top, #000, rgba(0, 0, 0, 0));
      background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

    ._color_selector {
      height: 10px;
      background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
      background: -webkit-linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
    }

    .hue-vertical {
      background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
      background: -webkit-linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
    }

    ._pickerBtn {
      position: absolute;
      top: 0%;
      left: 100%;
      cursor: default;
    }

    ._pickerBtn > div {
      width: 12px;
      height: 12px;
      border-radius: 6px;
      box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset;
      transform: translate(-6px, -6px);
    }

    ._picker {
      position: absolute;
      left: 0%;
    }

    ._picker > div {
      width: 12px;
      height: 12px;
      border-radius: 6px;
      transform: translate(-6px, -1px);
      background-color: rgb(248, 248, 248);
      box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px;
    }

    ._alpha_selector {
      padding: 0px 2px;
      position: relative;
      height: 100%;
      background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
    }

    ._alpha_tools {
      background: url('');
      height: 10px;
      margin-top: 5px;
    }


    ._flex {
      display: flex;
      align-items: center;
      height: 40px;
    }

    ._showcolor {
      width: 45px;
    }

    ._showcolor > div {
      width: 26px;
      height: 26px;
      position: relative;
      overflow: hidden;
    }

    ._preview_color {
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset;
      z-index: 2;
    }

    ._select_color {
      height: 10px;
      position: relative;
    }

    ._select_color > div {
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
    }

    ._color-input {
      position: relative;
    }

    ._color-input input {
      font-size: 11px;
      color: rgb(51, 51, 51);
      width: 100%;
      border-radius: 2px;
      border: none;
      box-shadow: rgb(218, 218, 218) 0px 0px 0px 1px inset;
      height: 21px;
      text-align: center;
    }

    ._color-input span {
      text-transform: uppercase;
      font-size: 11px;
      line-height: 11px;
      color: rgb(150, 150, 150);
      text-align: center;
      display: block;
      margin-top: 12px;
    }
    ._inputWrap {
      flex: 1; display: flex; margin-left: -6px;
      > *{
        flex: auto;
        &:nth-of-type(1) {
          width: 80px; flex:none;
        }
      }

    }
  }
}

//============== 表单焦点状态 ==============
//focus 获得焦点
.ks-input input:not(:disabled):focus,
.ks-input textarea:not(:disabled):focus,
input.ks-input:not(:disabled):focus,
.ks-textarea textarea:not(:disabled):focus,
ks-input-group > input:focus,
ks-input-group > textarea:focus,
.ks-select[active],
ks-area:not([disabled])[active] {
  border-color: var(--highcolor);
  box-shadow: 0 0 0 2px rgba(45, 140, 240, .2);
  position: relative;
  z-index: 9
}

//图片上传组件
ks-pic {
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--input-background);
  border: var(--input-border) 1px dashed;
  position: relative;
  /* 上传时的进度展示 */

  &[uploading] {
    &:after {
      content: '';
      height: 5px;
      width: var(--progress);
      background: #00e747;
      border-radius: 99px;
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 3;
    }

    &:before {
      content: '';
      width: 100%;
      height: calc(100% - var(--progress));
      background: rgba(0, 0, 0, .5);
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 2;
    }
  }

  &:not([disabled]):hover {
    border-color: var(--input-border-hover);
  }

  > label {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    cursor: pointer;
    text-align: center;
    font-size: 56px;
    color: var(--input-text);

    &[icon]:before {
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -23px 0 0 -23px;
      font-size: 46px
    }

    > input[type=file] {
      display: none;
    }
  }

  ._preview {
    display: block;
    width: 100%;
    height: 100%;

    img {
      width: 100%;
      min-height: 100%;
    }

    ~ label:before {
      display: none;
    }
  }

  ks-pic-thumb {
    height: 100%;

    img {
      width: 100%;
    }

    > *[icon*=delete] {
      display: none;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, .9);
      color: #fff;
      text-align: center;
      cursor: pointer;
      padding: 4px 0
    }

    &:hover > *[icon*=delete] {
      display: block
    }

    & ~ label {
      display: none;
      background: rgba(0, 0, 0, .3);
      color: rgba(255, 255, 255, .6);
    }
  }

  &:hover ks-pic-thumb ~ label {
    display: block
  }
}

//============== 输入框组 ==============
ks-input-group {
  display: inline-flex;
  align-items: stretch; /* 垂直居中 */
  width: 100%;
  border-collapse: separate;
  vertical-align: middle;

  > .ks-checkbox, > .ks-radio, > .ks-switch {
    height: initial;
    line-height: initial;
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中，如果需要的话 */
    padding: 0 5px;
  }

  //默认所有去圆角
  > *, > .ks-input > input, > .ks-input > textarea {
    border-radius: 0;
    vertical-align: middle;
    font-style: normal;
    white-space: nowrap;
  }

  > .ks-input:not(input):not(ks-btn) {
    border: 0;
  }
  > .ks-input:not(input):not(ks-btn) , > .ks-select, .ks-range {
    width: 100%;
    flex: 1;
  }

  //非hover focus的所有子元素默认边线
  > *:not(input):not(ks-btn) {
    border: var(--bordercolor) 1px solid;
    border-left-width: 0;
    border-right-width: 0
  }

  > *:first-child,
  > *:first-child > input {
    border-left-width: 1px;
    border-radius: 3px 0 0 3px;
  }

  > *:last-child,
  > *:last-child > input {
    border-right-width: 1px;
    border-radius: 0 3px 3px 0;
  }

  > *:first-child:not(:hover):not(:focus):not(.a):not([active]):not(input) {
    border-right-color: transparent
  }

  > *:last-child:not(:hover):not(:focus):not(.a):not([active]):not(input):not(.ks-select) {
    border-left-color: transparent
  }

  /* 所有无class 无style的标签都加上内边距和垂直居中 */
  > * {
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中，如果需要的话 */
  }
  > div:not([class]), > span:not([class]), > i:not([class]) {
    padding: 0 10px;
  }

  > .ks-input {
    width: 100%;
  }

  > ks-btn {
    box-shadow: none;
  }
}

//============== 图片 ==============
.ks-img {
  text-align: center;
  overflow: hidden;
  border-radius: 5px;
  background: #f2f2f2;
  width: 140px;
  height: 140px;
  display: inline-block
}

.ks-img img {
  max-width: 100%;
}

//============== H5标题栏 ==============
.ks-hdbar {
  height: 45px;
  line-height: 45px;
  font-size: 16px;
  background: #fff;
  position: relative
}

.ks-hdbar > [icon='back']:first-child {
  width: 30px;
  height: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
}

.ks-hdbar .ks-hdbar-title {
  text-align: center;
  font-size: 16px;
}

//============== 行 & 列 & 布局 ==============
//最大高度
.ks-max-h {
  height: 100%;
}

//最大宽度
.ks-max-w {
  width: 100%;
}


//相对定位
.ks-pos {
  position: relative;
}

/*绝对定位，将会按照1234对应四个角定位
    1 2
    3 4
*/
.ks-pos-1, .ks-pos-2, .ks-pos-3, .ks-pos-4 {
  position: absolute;
  z-index: 9;
}

.ks-pos-1 {
  left: 0;
  top: 0;
}

.ks-pos-2 {
  right: 0;
  top: 0;
}

.ks-pos-3 {
  left: 0;
  bottom: 0;
}

.ks-pos-4 {
  right: 0;
  bottom: 0;
}


//============== 圆角 ==============
.ks-o, .ks-o-sub > * {
  border-radius: 100%;
  overflow: hidden
}

.ks-o-1, .ks-o-1-sub > * {
  border-radius: 3px
}

.ks-o-2, .ks-o-2-sub > * {
  border-radius: 5px
}

.ks-o-3, .ks-o-3-sub > * {
  border-radius: 10px
}

.ks-o-4, .ks-o-4-sub > * {
  border-radius: 15px
}

.ks-o-5, .ks-o-5-sub > * {
  border-radius: 20px
}

.ks-o-6, .ks-o-6-sub > * {
  border-radius: 25px
}

.ks-o-7, .ks-o-7-sub > * {
  border-radius: 30px
}

//============== 常用属性 ==============

//必须属性 占用before给一个红星
*[data-required]:before, [required]:before {
  content: '*';
  color: var(--red);
  margin-right: 5px;
  font-family: SimSun;
  font-size: 14px;
}

//带下划线的链接
.ks-link, .ks-link-line {
  cursor: pointer
}

.ks-link-line, .ks-link-line:hover {
  text-decoration: underline;
}

//清除浮动
.ks-clear:after,
.ks-fl-sub::after,
.ks-fr-sub::after,
.ks-slide-c::after {
  content: '';
  width: 100%;
  clear: both;
  display: block;
  overflow: hidden
}

//左浮动
.ks-fl {
  float: left
}

.ks-fl-sub > * {
  float: left
}

//右浮动
.ks-fr {
  float: right
}

.ks-fr-sub > * {
  float: right
}

//文字方向
.ks-tl {
  text-align: left
}

.ks-tc {
  text-align: center
}

.ks-tr {
  text-align: right
}

//非块级元素垂直居中
.ks-middle, .ks-middle-sub > * {
  vertical-align: middle;
  display: inline-block;
}

//小圆点
ks-dot {
  width: 6px;
  height: 6px;
  line-height: 1.5;
  display: inline-block;
  vertical-align: super;
  border-radius: 2em;

  //消息处理 属性值第一位包含数字1-9
  &:not(:empty) {
    width: auto;
    height: auto;
    padding: 0 6px;
    font-size: 12px;
    font-weight: normal;
    color: #fff;
    margin: 0 0 0 -8px;
  }

  .loop(@i) when (@i =< @ColorListLength) {
    @Cname: extract(@ColorList, @i);
    @Cval: extract(@ColorListValue, @i);
    &[color='@{Cname}'] {
      background: @Cval;
    }
    .loop(@i+1);
  }
  .loop(1);
}

//加粗
.ks-fw0 {
  font-weight: normal
}

.ks-fw1 {
  font-weight: 500;
  --wght: 200;
}

.ks-fw2 {
  font-weight: bold;
  --wght: 500;
}

.ks-fw3 {
  font-weight: bold;
  --wght: 800;
}

//字号
.ks-f00 {
  font-size: initial;
}

.ks-f0 {
  font-size: 10px;
}

.ks-f1 {
  font-size: 12px;
}

.ks-f2 {
  font-size: 14px;
}

.ks-f3 {
  font-size: 16px;
}

.ks-f4 {
  font-size: 20px;
}

.ks-f5 {
  font-size: 22px;
}

.ks-f6 {
  font-size: 24px;
}

.ks-f7 {
  font-size: 26px;
}

.ks-f8 {
  font-size: 28px;
}

.ks-f9 {
  font-size: 30px;
}

.ks-f10 {
  font-size: 32px;
}

.ks-f11 {
  font-size: 34px;
}

.ks-f12 {
  font-size: 36px;
}

.ks-f13 {
  font-size: 38px;
}

.ks-f14 {
  font-size: 40px;
}

.ks-f15 {
  font-size: 42px;
}

.ks-f16 {
  font-size: 44px;
}

.ks-f17 {
  font-size: 50px;
}


//============== 内边距 -sub后缀表示所有直接子级 ==============
.ks-p {
  padding: 15px;
}

.ks-p-sub > * {
  padding: 15px;
}

.ks-p0 {
  padding: 0 !important;
}

.ks-p0-sub > * {
  padding: 0 !important;
}

.ks-p1 {
  padding: 5px;
}

.ks-p1-sub > * {
  padding: 5px;
}

.ks-p2 {
  padding: 10px;
}

.ks-p2-sub > * {
  padding: 10px;
}

.ks-p3 {
  padding: 15px;
}

.ks-p3-sub > * {
  padding: 15px;
}

.ks-p4 {
  padding: 20px;
}

.ks-p4-sub > * {
  padding: 20px;
}

.ks-p5 {
  padding: 25px;
}

.ks-p5-sub > * {
  padding: 25px;
}

//上
.ks-pt {
  padding-top: 15px;
}

.ks-pt-sub > *:not(:first-child) {
  padding-top: 15px;
}

.ks-pt0 {
  padding-top: 0 !important;
}

.ks-pt1 {
  padding-top: 5px;
}

.ks-pt5-sub > *:not(:first-child) {
  padding-top: 5px;
}

.ks-pt2 {
  padding-top: 10px;
}

.ks-pt5-sub > *:not(:first-child) {
  padding-top: 10px;
}

.ks-pt3 {
  padding-top: 15px;
}

.ks-pt5-sub > *:not(:first-child) {
  padding-top: 15px;
}

.ks-pt4 {
  padding-top: 20px;
}

.ks-pt5-sub > *:not(:first-child) {
  padding-top: 20px;
}

.ks-pt5 {
  padding-top: 25px;
}

.ks-pt5-sub > *:not(:first-child) {
  padding-top: 25px;
}

//右
.ks-pr {
  padding-right: 15px;
}

.ks-pr-sub > *:not(:last-child) {
  padding-right: 15px;
}

.ks-pr0 {
  padding-right: 0 !important;
}

.ks-pr1 {
  padding-right: 5px;
}

.ks-pr1-sub > *:not(:last-child) {
  padding-right: 5px;
}

.ks-pr2 {
  padding-right: 10px;
}

.ks-pr2-sub > *:not(:last-child) {
  padding-right: 10px;
}

.ks-pr3 {
  padding-right: 15px;
}

.ks-pr3-sub > *:not(:last-child) {
  padding-right: 15px;
}

.ks-pr4 {
  padding-right: 20px;
}

.ks-pr4-sub > *:not(:last-child) {
  padding-right: 20px;
}

.ks-pr5 {
  padding-right: 25px;
}

.ks-pr5-sub > *:not(:last-child) {
  padding-right: 25px;
}

//下
.ks-pb {
  padding-bottom: 15px;
}

.ks-pb-sub > *:not(:last-child) {
  padding-bottom: 15px;
}

.ks-pb0 {
  padding-bottom: 0 !important;
}

.ks-pb1 {
  padding-bottom: 5px;
}

.ks-pb1-sub > *:not(:last-child) {
  padding-bottom: 5px;
}

.ks-pb2 {
  padding-bottom: 10px;
}

.ks-pb2-sub > *:not(:last-child) {
  padding-bottom: 10px;
}

.ks-pb3 {
  padding-bottom: 15px;
}

.ks-pb3-sub > *:not(:last-child) {
  padding-bottom: 15px;
}

.ks-pb4 {
  padding-bottom: 20px;
}

.ks-pb4-sub > *:not(:last-child) {
  padding-bottom: 20px;
}

.ks-pb5 {
  padding-bottom: 25px;
}

.ks-pb5-sub > *:not(:last-child) {
  padding-bottom: 25px;
}

//左
.ks-pl {
  padding-left: 15px;
}

.ks-pl-sub > *:not(:first-child) {
  padding-left: 15px;
}

.ks-pl0 {
  padding-left: 0 !important;
}

.ks-pl1 {
  padding-left: 5px;
}

.ks-pl5-sub > *:not(:first-child) {
  padding-left: 5px;
}

.ks-pl2 {
  padding-left: 10px;
}

.ks-pl5-sub > *:not(:first-child) {
  padding-left: 10px;
}

.ks-pl3 {
  padding-left: 15px;
}

.ks-pl5-sub > *:not(:first-child) {
  padding-left: 15px;
}

.ks-pl4 {
  padding-left: 20px;
}

.ks-pl5-sub > *:not(:first-child) {
  padding-left: 20px;
}

.ks-pl5 {
  padding-left: 25px;
}

.ks-pl5-sub > *:not(:first-child) {
  padding-left: 25px;
}

//上下
.ks-ptb {
  padding-top: 15px;
  padding-bottom: 15px;
}

.ks-ptb-sub > * {
  padding-top: 15px;
  padding-bottom: 15px;
}

.ks-ptb0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.ks-ptb0-sub > * {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.ks-ptb1 {
  padding-top: 5px;
  padding-bottom: 5px;
}

.ks-ptb1-sub > * {
  padding-top: 5px;
  padding-bottom: 5px;
}

.ks-ptb2 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.ks-ptb2-sub > * {
  padding-top: 10px;
  padding-bottom: 10px;
}

.ks-ptb3 {
  padding-top: 15px;
  padding-bottom: 15px;
}

.ks-ptb3-sub > * {
  padding-top: 15px;
  padding-bottom: 15px;
}

.ks-ptb4 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.ks-ptb4-sub > * {
  padding-top: 20px;
  padding-bottom: 20px;
}

.ks-ptb5 {
  padding-top: 25px;
  padding-bottom: 25px;
}

.ks-ptb5-sub > * {
  padding-top: 25px;
  padding-bottom: 25px;
}

//左右
.ks-plr {
  padding-left: 15px;
  padding-right: 15px;
}

.ks-plr-sub > * {
  padding-left: 15px;
  padding-right: 15px;
}

.ks-plr0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.ks-plr0-sub > * {
  padding-left: 0 !important;;
  padding-right: 0 !important;
}

.ks-plr1 {
  padding-left: 5px;
  padding-right: 5px;
}

.ks-plr1-sub > * {
  padding-left: 5px;
  padding-right: 5px;
}

.ks-plr2 {
  padding-left: 10px;
  padding-right: 10px;
}

.ks-plr2-sub > * {
  padding-left: 10px;
  padding-right: 10px;
}

.ks-plr3 {
  padding-left: 15px;
  padding-right: 15px;
}

.ks-plr3-sub > * {
  padding-left: 15px;
  padding-right: 15px;
}

.ks-plr4 {
  padding-left: 20px;
  padding-right: 20px;
}

.ks-plr4-sub > * {
  padding-left: 20px;
  padding-right: 20px;
}

.ks-plr5 {
  padding-left: 25px;
  padding-right: 25px;
}

.ks-plr5-sub > * {
  padding-left: 25px;
  padding-right: 25px;
}

//============== 外边距 -sub后缀表示所有直接子级（上左第一个无边距 右下最后一个没边距） ==============
.ks-m {
  margin: 15px;
}

.ks-m-sub > * {
  margin: 15px;
}

.ks-m0 {
  margin: 0 !important;
}

.ks-m0-sub > * {
  margin: 0 !important;
}

.ks-m1 {
  margin: 5px;
}

.ks-m1-sub > * {
  margin: 5px;
}

.ks-m2 {
  margin: 10px;
}

.ks-m2-sub > * {
  margin: 10px;
}

.ks-m3 {
  margin: 15px;
}

.ks-m3-sub > * {
  margin: 15px;
}

.ks-m4 {
  margin: 20px;
}

.ks-m4-sub > * {
  margin: 20px;
}

.ks-m5 {
  margin: 25px;
}

.ks-m5-sub > * {
  margin: 25px;
}

//上
.ks-mt {
  margin-top: 15px;
}

.ks-mt-sub > *:not(:first-child) {
  margin-top: 15px;
}

.ks-mt0 {
  margin-top: 0 !important;
}

.ks-mt1 {
  margin-top: 5px;
}

.ks-mt5-sub > *:not(:first-child) {
  margin-top: 5px;
}

.ks-mt2 {
  margin-top: 10px;
}

.ks-mt5-sub > *:not(:first-child) {
  margin-top: 10px;
}

.ks-mt3 {
  margin-top: 15px;
}

.ks-mt5-sub > *:not(:first-child) {
  margin-top: 15px;
}

.ks-mt4 {
  margin-top: 20px;
}

.ks-mt5-sub > *:not(:first-child) {
  margin-top: 20px;
}

.ks-mt5 {
  margin-top: 25px;
}

.ks-mt5-sub > *:not(:first-child) {
  margin-top: 25px;
}

//右
.ks-mr {
  margin-right: 15px;
}

.ks-mr-sub > *:not(:last-child) {
  margin-right: 15px;
}

.ks-mr0 {
  margin-right: 0 !important;
}

.ks-mr1 {
  margin-right: 5px;
}

.ks-mr1-sub > *:not(:last-child) {
  margin-right: 5px;
}

.ks-mr2 {
  margin-right: 10px;
}

.ks-mr2-sub > *:not(:last-child) {
  margin-right: 10px;
}

.ks-mr3 {
  margin-right: 15px;
}

.ks-mr3-sub > *:not(:last-child) {
  margin-right: 15px;
}

.ks-mr4 {
  margin-right: 20px;
}

.ks-mr4-sub > *:not(:last-child) {
  margin-right: 20px;
}

.ks-mr5 {
  margin-right: 25px;
}

.ks-mr5-sub > *:not(:last-child) {
  margin-right: 25px;
}

//下
.ks-mb {
  margin-bottom: 15px;
}

.ks-mb-sub > *:not(:last-child) {
  margin-bottom: 15px;
}

.ks-mb0 {
  margin-bottom: 0 !important;
}

.ks-mb1 {
  margin-bottom: 5px;
}

.ks-mb1-sub > *:not(:last-child) {
  margin-bottom: 5px;
}

.ks-mb2 {
  margin-bottom: 10px;
}

.ks-mb2-sub > *:not(:last-child) {
  margin-bottom: 10px;
}

.ks-mb3 {
  margin-bottom: 15px;
}

.ks-mb3-sub > *:not(:last-child) {
  margin-bottom: 15px;
}

.ks-mb4 {
  margin-bottom: 20px;
}

.ks-mb4-sub > *:not(:last-child) {
  margin-bottom: 20px;
}

.ks-mb5 {
  margin-bottom: 25px;
}

.ks-mb5-sub > *:not(:last-child) {
  margin-bottom: 25px;
}

//左
.ks-ml {
  margin-left: 15px;
}

.ks-ml-sub > *:not(:last-child) {
  margin-left: 15px;
}

.ks-ml0 {
  margin-left: 0 !important;
}

.ks-ml1 {
  margin-left: 5px;
}

.ks-ml5-sub > *:not(:last-child) {
  margin-left: 5px;
}

.ks-ml2 {
  margin-left: 10px;
}

.ks-ml5-sub > *:not(:last-child) {
  margin-left: 10px;
}

.ks-ml3 {
  margin-left: 15px;
}

.ks-ml5-sub > *:not(:last-child) {
  margin-left: 15px;
}

.ks-ml4 {
  margin-left: 20px;
}

.ks-ml5-sub > *:not(:last-child) {
  margin-left: 20px;
}

.ks-ml5 {
  margin-left: 25px;
}

.ks-ml5-sub > *:not(:last-child) {
  margin-left: 25px;
}

//上下
.ks-mtb {
  margin-top: 15px;
  margin-bottom: 15px;
}

.ks-mtb-sub > * {
  margin-top: 15px;
  margin-bottom: 15px;
}

.ks-mtb0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.ks-mtb0-sub > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.ks-mtb1 {
  margin-top: 5px;
  margin-bottom: 5px;
}

.ks-mtb1-sub > * {
  margin-top: 5px;
  margin-bottom: 5px;
}

.ks-mtb2 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.ks-mtb2-sub > * {
  margin-top: 10px;
  margin-bottom: 10px;
}

.ks-mtb3 {
  margin-top: 15px;
  margin-bottom: 15px;
}

.ks-mtb3-sub > * {
  margin-top: 15px;
  margin-bottom: 15px;
}

.ks-mtb4 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.ks-mtb4-sub > * {
  margin-top: 20px;
  margin-bottom: 20px;
}

.ks-mtb5 {
  margin-top: 25px;
  margin-bottom: 25px;
}

.ks-mtb5-sub > * {
  margin-top: 25px;
  margin-bottom: 25px;
}

//左右
.ks-mlr {
  margin-left: 15px;
  margin-right: 15px;
}

.ks-mlr-sub > * {
  margin-left: 15px;
  margin-right: 15px;
}

.ks-mlr0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.ks-mlr0-sub > * {
  margin-left: 0 !important;;
  margin-right: 0 !important;
}

.ks-mlr1 {
  margin-left: 5px;
  margin-right: 5px;
}

.ks-mlr1-sub > * {
  margin-left: 5px;
  margin-right: 5px;
}

.ks-mlr2 {
  margin-left: 10px;
  margin-right: 10px;
}

.ks-mlr2-sub > * {
  margin-left: 10px;
  margin-right: 10px;
}

.ks-mlr3 {
  margin-left: 15px;
  margin-right: 15px;
}

.ks-mlr3-sub > * {
  margin-left: 15px;
  margin-right: 15px;
}

.ks-mlr4 {
  margin-left: 20px;
  margin-right: 20px;
}

.ks-mlr4-sub > * {
  margin-left: 20px;
  margin-right: 20px;
}

.ks-mlr5 {
  margin-left: 25px;
  margin-right: 25px;
}

.ks-mlr5-sub > * {
  margin-left: 25px;
  margin-right: 25px;
}


//============== 文字、背景颜色 ==============

.loop(@i) when (@i =< @ColorListLength) {
  @Cname: extract(@ColorList, @i);
  @Cval: extract(@ColorListValue, @i);
  .ks-bg-@{Cname} {
    background-color: @Cval;
  }
  .ks-text-@{Cname} {
    color: @Cval;
  }
  .ks-tag-@{Cname} {
    color: @Cval;
    border-color: @Cval;
  }
  .loop(@i+1);
}

.loop(1);

//============== 边框 ==============

.ks-bd {
  border: var(--bordercolor) 1px solid;
}

.ks-bd0 {
  border: 0 !important;
}

.ks-bd-t {
  border-top: var(--bordercolor) 1px solid;
}

.ks-bd-r {
  border-right: var(--bordercolor) 1px solid;
}

.ks-bd-b {
  border-bottom: var(--bordercolor) 1px solid;
}

.ks-bd-l {
  border-left: var(--bordercolor) 1px solid;
}


//============== 分割线 ==============
ks-hr {
  background: var(--bordercolor);
  width: 100%;
  height: 1px;
  display: block;
}

//============== 分割线 ==============
ks-line {
  position: relative;
  display: block;
  text-align: center
}

ks-line[label]:before {
  content: '';
  height: 1px;
  background: #ddd;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 1
}

ks-line[label]:after {
  content: attr(label);
  padding: 0 0.7em;
  background: #fff;
  position: relative;
  z-index: 2;
}

/* ============== 其他杂项 ============== */
/* Flexbox 布局 */
ks-flex, .ks-flex {
  display: flex;

  &[vertical] {
    flex-direction: column;
    height: 100%;
    flex-flow: column
  }

  > * {
    flex: none;
  }

  /* 撑满 填充 */

  > *[auto] {
    flex: 1
  }
}

/* 容器 垂直滚动 */
.ks-scroll-y {
  overflow: hidden auto;
}

/* 容器 横向滚动 */
.ks-scroll-x {
  overflow: auto hidden;
}

/* 禁止鼠标选中 */
.ks-noselect {
  user-select: none
}

/* 磨砂背景 */
.ks-bgf {
  backdrop-filter: blur(10px);
}

/* 鼠标 - 手型 */
.ks-pointer {
  cursor: pointer
}

//============== 动画 ==============
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes ks-anim-up {
  0% {
    transform: translate3d(0, 50%, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes ks-anim-up-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 15%, 0);
    opacity: 0;
  }
}

@keyframes ks-anim-down {
  0% {
    transform: translate3d(0, -50%, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes ks-anim-down-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, -15%, 0);
    opacity: 0;
  }
}

@keyframes ks-anim-left {
  0% {
    transform: translate3d(50%, 0, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes ks-anim-left-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
}

@keyframes ks-anim-right {
  0% {
    transform: translate3d(-50%, 0, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes ks-anim-right-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(-100%, 0, 0);
    opacity: 0;
  }
}

@keyframes ks-anim-scale {
  0% {
    transform: scale(.3);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes ks-anim-scale-out {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes ks-anim-fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes ks-anim-fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.ks-layer, .ks-layer-cover, *[class*='ks-anim-'] {
  -webkit-animation-duration: .2s;
  animation-duration: .2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}

.ks-anim-unfold {
  animation-name: ks-anim-unfold;
}

.ks-anim-up {
  animation-name: ks-anim-up;
}

.ks-anim-down {
  animation-name: ks-anim-down;
}

.ks-anim-left {
  animation-name: ks-anim-left;
}

.ks-anim-right {
  animation-name: ks-anim-right;
}

.ks-anim-scale {
  animation-name: ks-anim-scale;
}

.ks-anim-fadein {
  animation-name: ks-anim-fadein;
}

.ks-anim-fadeout {
  animation-name: ks-anim-fadeout;
}


.ks-anim-hide {
  opacity: 0;
}

.ks-anim-hide.ks-anim-unfold {
  animation-name: ks-anim-unfold-out;
}

.ks-anim-hide.ks-anim-up {
  animation-name: ks-anim-up-out;
}

.ks-anim-hide.ks-anim-down {
  animation-name: ks-anim-down-out;
}

.ks-anim-hide.ks-anim-left {
  animation-name: ks-anim-left-out;
}

.ks-anim-hide.ks-anim-right {
  animation-name: ks-anim-right-out;
}

.ks-anim-hide.ks-anim-scale {
  animation-name: ks-anim-scale-out;
}

//============== 输入框组 ==============
.ks-loading::before, ks-btn[loading]:before {
  --size: 0.2rem;
  content: '\eec4';
  font-family: @iconfont;
  font-size: var(--size);
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  width: var(--size);
  height: var(--size);
  line-height: var(--size);
  animation: spin 1s linear infinite;
}


//============== 表单小尺寸 ==============

.ks-input-arrow {
  &[size=small] {
    > input {
      padding-left: 6px;
      padding-right: 16px
    }

    > [data-digit] {
      width: 16px;
      line-height: 1
    }
  }

  &[size=mini] {
    > input {
      padding-left: 6px;
      padding-right: 16px
    }

    > [data-digit] {
      width: 16px;
      line-height: 1
    }
  }
}


ks-input-group[size=mini],
ks-input-group[size=mini] > *,
.ks-input[size=mini],
.ks-input[size=mini] > input,
.ks-select[size=mini],
.ks-date[size=mini],
ks-area[size=mini], .ks-range[size=mini] {
  height: (@inputHeight - 12);
  line-height: (@inputHeight - 14);
  font-size: 12px;
}

.ks-input-arrow[size=mini] > input {
  padding-left: 6px;
  padding-right: 16px
}

.ks-input-arrow[size=mini] > [data-digit] {
  width: 16px;
  line-height: 1
}


//手机浏览器中日期组件禁止输入(禁止手机弹出输入法)
html[device=mobile] .ks-input[type='date'] {
  position: relative;
}

html[device=mobile] .ks-input[type='date'] > i.ks-input-cover {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: #fff;
  opacity: 0;
  z-index: 10;
}


//============== 地区选择 ==============
//按钮
ks-area {
  cursor: pointer;
  padding: 0 10px;

  span {
    float: left;
    padding: 0 3px;
    white-space: nowrap;
  }

  span:last-child {
    border-right: 0
  }

  &[maxlevel='1'] span {
    max-width: 100%;
  }

  &[maxlevel='2'] span {
    max-width: 50%;
  }

  &[maxlevel='3'] span {
    max-width: 33.33333%;
  }

  &[maxlevel='4'] span {
    max-width: 25%;
  }
}


//============== 菜单 ==============
.ks-menu > * {
  padding: 10px;
  display: block;
}

.ks-menu > .ks-label {
  margin-bottom: 0
}


//============== 附加效果 ==============
//去掉动画
.ks-no-transition {
  transition: none !important;
}

//默认动画 线性3ms
.ks-transition {
  transition: var(--default-transition);
}

//============== 附加样式 ==============
.ks-click {
  cursor: pointer
}

//文字
.ks-text-top {
  vertical-align: text-top
}

.ks-text-center {
  vertical-align: middle
}

.ks-text-bottom {
  vertical-align: text-bottom
}


.ks-editor {
  border: #ddd 1px solid;
  background: #fff;
  border-radius: 3px;
}

.ks-editor-content .ql-editor {
  min-height: 280px;
  max-height: 420px;
}

.ks-editor .ql-toolbar.ql-snow {
  border: none;
  border-bottom: #ddd 1px solid;
}

.ql-toolbar.ql-snow .ql-formats {
  border-right: #f2f2f2 1px solid;
  padding-right: 5px;
  margin-right: 5px;
}

.ql-toolbar.ql-snow .ql-formats:last-of-type {
  border-right: 0;
  padding-right: 0;
  margin-right: 0
}

.ks-editor .ql-container.ql-snow {
  border: none
}


.ksaicon {
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  font-size: 40px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #a902bd 1%, #3d0244 100%);
  position: relative
}

.ksaicon-amt {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: spin 10s linear infinite;
  z-index: 2;
}

.ksaicon-amt > div {
  position: absolute;
  border-radius: 100%;
  width: 100%;
  height: 100%;
}

.ksaicon-amt div:nth-of-type(1) {
  border-left: 0.1047em solid #26bd00;
  border-top: 0.238em solid transparent;
}

.ksaicon-amt div:nth-of-type(2) {
  border-top: 0.1047em solid #fcff25;
  border-right: 0.238em solid transparent;
}

.ksaicon-amt div:nth-of-type(3) {
  border-right: 0.1047em solid #ff9425;
  border-bottom: 0.238em solid transparent;
}

.ksaicon-amt div:nth-of-type(4) {
  border-bottom: 0.1047em solid #f51e1e;
  border-left: 0.238em solid transparent;
}

.ksaicon-ks {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -0.2142em 0 0 -0.2em;
  z-index: 3;
  width: 0.4285em;
  height: 0.4285em;
  transform: skew(-15deg);
}

.ksaicon-ks > div {
  position: absolute;
  background: #fff;
}

.ksaicon-ks > div:nth-of-type(1) {
  width: 0.0952em;
  height: 0.4285em;
}

.ksaicon-ks > div:nth-of-type(2) {
  width: 0.0952em;
  height: 0.2857em;
  transform: skew(-45deg);
  left: 0.1428em;
}

.ksaicon-ks > div:nth-of-type(3) {
  width: 0.0952em;
  height: 0.238em;
  transform: skew(45deg);
  top: 0.1857em;
  left: 0.2142em;
}

ks-progress {
  display: inline-block;
  height: 10px;
  width: 100%;
  background: rgba(255, 255, 255, 1);
  box-shadow: inset rgba(0, 0, 0, .2) 0 0 5px;
  border-radius: 999em;
  position: relative;

  span {
    width: auto;
    height: 100%;
    border-radius: 999em;
    background: #5ab32d;
    float: left;
    position: relative;
    overflow: hidden;

    &:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      background-image: linear-gradient(to right, transparent, rgb(5, 255, 197) 50%, transparent);
      animation: ks-progress-cover 2s linear infinite;
    }

  }

  & i {
    background: #E12318;
    color: #fff;
    position: absolute;
    padding: 0 3px;
    z-index: 3;
    font-size: 12px;
    font-style: normal;
    height: 14px;
    border-radius: 999em;
    top: -8px;
    //margin-left: -35px;
    display: none;
  }

  &[showtext] i {
    display: inline-block
  }
}


@keyframes ks-progress-cover {
  0% {
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    transform: translate3d(100%, 0, 0);
  }
}